<template>
    <view class="mckou-weather-content">
        <view class="more-day-report">
            <view class="top-module">
                <view class="title" >多天预报</view>
                <!-- <picker @change="bindPickerChange"  >
                    <view class="change">
                        <label for="">{{ weatherTypeArray[weatherTypeIndex] }}</label>
                        <view class="down-arrow"></view>
                    </view>
                </picker> -->
            </view>
            <view class="body-module">
                <view class="body-weather-line" v-show="weatherTypeIndex != 1">
                    <canvas :style="{ width: cWidth + 'px', height: '100px' }" canvas-id="weather-canvas"></canvas>
                </view>
                <view v-if="weatherTypeIndex == 1" class="zhuzhuangtu">
                    <view class="zhuzhuangtu-item" v-for="(item, index) in pillarArray" :key="index">
                        <view class="item-bg">
                            <view class="item" :style="{ top: item.top + 'px', height: item.height + 'px' }"></view>
                        </view>
                    </view>
                </view>
                <view class="body-item" v-for="(item, index) in weatherData" :key="index">
                    <view class="day-font">{{ item.dayWeek }}</view>
                    <!-- <view class="day-time">{{ item.dayLabel }}</view> -->
                    <view class="weather-font">{{ item.weatherLabel }}</view>
                    <view class="weather-image">
                        <image :src="item.weatherIcon" mode=""></image>
                    </view>
                    <view class="max-weather">{{ item.max }}</view>
                    <view class="weather-line"></view>
                    <view class="min-weather">{{ item.min }}</view>
                    <view class="feng-font">{{ item.wind }}</view>
                    <!-- <view class="day-state">
                        <label>{{ item.air }}</label>
                    </view> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getWeather } from "@/api/index";

export default {
    data() {
        return {
            weatherTypeArray: ['折线', '柱状'],
            weatherTypeIndex: 1,
            cWidth: 345,
            pillarArray: [],
            weatherData: [
                //     {
                //     dayWeek: "周二",
                //     dayLabel: "8/11",
                //     weatherLabel: "阴",
                //     weatherIcon: "http://file.powerecs.com/fileserver/fileserver/icon1.png",
                //     max: 34,
                //     min: 27,
                //     wind: "西南风",
                //     air: "良"
                // }, {
                //     dayWeek: "周三",
                //     dayLabel: "8/12",
                //     weatherLabel: "阴",
                //     weatherIcon: "http://file.powerecs.com/fileserver/fileserver/icon1.png",
                //     max: 34,
                //     min: 27,
                //     wind: "西南风",
                //     air: "良"
                // },
            ]
        }
    },
    props: {
        // weatherData: {
        //     type: Array
        // }
    },
    async onLoad(options) {
        console.log('onLoad', options);
        const { showapi_res_body = {} } = await getWeather({
            lat: options.lat,
            lng: options.lng
        })

        const { f1, f2, f3, f4, f5, f6, f7 } = showapi_res_body || {}

        const list = [];

        list.push(f1, f2, f3, f4, f5, f6, f7)


        console.log('list',list);
        

        list.forEach((_r) => {
            this.weatherData.push({
                dayWeek: `周${_r?.weekday}`,
                // dayLabel: "8/12",
                weatherLabel: _r?.day_weather,
                weatherIcon: _r?.day_weather_pic,
                max: _r.day_air_temperature,
                min: _r?.night_air_temperature,
                wind: _r?.day_wind_direction,
                // air: "良"
            })
        })

        this.$nextTick(() => {
            
            this.init();
        })

      
    },
    async onShow(options) {


    },
    methods: {
        init() {
            var that = this;
            uni.getSystemInfo({
                success: function (res) {
                    that.cWidth = Math.round(res.windowWidth * 0.92);
                }
            });
            that.doLineOrPiller();
        },
        doLineOrPiller() {
            // if (this.weatherTypeIndex == 1) {
            //     this.initWeatherPiller();
            // } else {
                this.initWeatherPointLine();
                this.weatherTypeIndex = 0;
            // }
        },
        //处理折线图
        async  initWeatherPointLine() {
             

            await this.$nextTick();
            console.log('开始处理折线图',this.weatherData);
            var maxArry = this.weatherData.map(item => {
                return item.max;
            });
            var minArry = this.weatherData.map(item => {
                return item.min;
            });
            var max = [];
            var min = [];
            var maxWeather = Math.max(...maxArry);
            var minWeather = Math.min(...minArry);
            var diff = maxWeather - minWeather;
            for (var i = 0; i < maxArry.length; i++) {
                var height = Math.round(((maxArry[i] - minArry[i]) / diff) * 80);

                max[i] = 50 - Math.round((80 / diff) * (maxWeather - maxArry[i]) + 10);
                min[i] = max[i] - height;
            }

            var section7width = Math.round(this.cWidth / 7);
            var cvs = uni.createCanvasContext('weather-canvas', this);
            cvs.setStrokeStyle('#FB7821');
            cvs.setLineWidth(1);
            cvs.beginPath();
            for (var i = 0; i < max.length; i++) {
                var wendu = max[i];
                var x = Math.round(section7width / 2) + Math.round(section7width * i);
                var y = 50 - wendu;
                cvs.arc(x, y, 5, 0, 2 * Math.PI);
                cvs.setFillStyle('#FB7821');
                cvs.fill();
                cvs.moveTo(x, y);
                if (i < max.length - 1) {
                    var nextX = x + section7width;
                    var nextY = 50 - max[i + 1];
                    cvs.lineTo(nextX, nextY);
                }
                cvs.stroke();
                cvs.beginPath();
            }

            cvs.setStrokeStyle('#1B9DFF');
            cvs.setLineWidth(1);
            for (var i = 0; i < min.length; i++) {
                var wendu = min[i];
                var x = Math.round(section7width / 2) + Math.round(section7width * i);
                var y = 50 - wendu;
                cvs.arc(x, y, 5, 0, 2 * Math.PI);
                cvs.setFillStyle('#1B9DFF');
                cvs.fill();
                cvs.moveTo(x, y);
                if (i < min.length - 1) {
                    var nextX = x + section7width;
                    var nextY = 50 - min[i + 1];
                    cvs.lineTo(nextX, nextY);
                }
                cvs.stroke();
                cvs.beginPath();
            }
            cvs.draw();

        },
        //处理柱状图
        initWeatherPiller() {
            var maxArry = this.weatherData.map(item => {
                return item.max;
            });
            var minArry = this.weatherData.map(item => {
                return item.min;
            });
            var pillarArray = [];

            var max = Math.max(...maxArry);
            var min = Math.min(...minArry);
            var diff = max - min;
            for (var i = 0; i < maxArry.length; i++) {
                var height = Math.round(((maxArry[i] - minArry[i]) / diff) * 80);
                pillarArray.push({
                    top: Math.round((80 / diff) * (max - maxArry[i])) + 10,
                    height: height
                });
            }
            this.pillarArray = pillarArray;
        },
        bindPickerChange(e) {
            var index = 0;
            if (index == 1) {
                this.initWeatherPiller();
            } else {
                this.initWeatherPointLine();
            }
            this.weatherTypeIndex = index;
        },
    }
}
</script>

<style lang="scss">
.mckou-weather-content {
    width: 750rpx;

    .more-day-report {
        // 690
        width: 92%;
        padding: 10rpx 4%;

        .top-module {
            width: 100%;
            padding: 16rpx 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f3f3f3;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #262628;
            }

            .change {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                border: 1px solid #e4e4e4;
                padding: 6rpx 20rpx;
                border-radius: 40rpx;
                font-size: 28rpx;

                .label {
                    color: #373739;
                }

                image {
                    width: 26rpx;
                    height: 26rpx;
                    margin-left: 20rpx;
                }

                .down-arrow {
                    width: 10px;
                    height: 10px;
                    margin-left: 10rpx;
                }

                .down-arrow:after {
                    content: '';
                    display: block;
                    width: 5px;
                    height: 5px;
                    border-right: 2px solid #373739;
                    border-top: 2px solid #373739;
                    -webkit-transform: rotate(135deg);
                    /*箭头方向可以自由切换角度*/
                    transform: rotate(135deg);
                }
            }
        }

        .body-module {
            width: 100%;
            padding: 20rpx 0;
            display: flex;
            flex-direction: row;
            position: relative;
            overflow-x: scroll;

            .body-weather-line {
                position: absolute;
                width: 100%;
                height: 100px;
                left: 0;
                top: 110px;
                z-index: 1;
            }

            .zhuzhuangtu {
                position: absolute;
                width: 100%;
                height: 80px;
                left: 0;
                top: 270rpx;
                z-index: 1;
                display: flex;
                flex-direction: row;

                .zhuzhuangtu-item {
                    width: 98rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .item-bg {
                        height: 80px;
                        width: 20rpx;
                        background-color: #f9f9f9;
                        position: relative;

                        .item {
                            position: absolute;
                            width: 100%;
                            background: linear-gradient(to bottom, #a818cb, #4aa2f9);
                            border-radius: 20rpx;
                        }
                    }
                }
            }

            .body-item {
                width: 98rpx;
                border-right: 1px solid #f3f3f3;
                display: flex;
                flex-direction: column;

                .day-font {
                    height: 50rpx;
                    line-height: 50rpx;
                    color: #3a3a3b;
                    font-size: 28rpx;
                    font-weight: bold;
                    text-align: center;
                }

                .day-time {
                    height: 50rpx;
                    line-height: 50rpx;
                    color: #3a3a3b;
                    font-size: 24rpx;
                    text-align: center;
                }

                .weather-font {
                    height: 50rpx;
                    line-height: 50rpx;
                    color: #3a3a3b;
                    font-size: 28rpx;
                    text-align: center;
                }

                .weather-image {
                    height: 50rpx;
                    display: flex;
                    justify-content: center;

                    image {
                        width: 50rpx;
                        height: 50rpx;
                    }
                }

                .max-weather {
                    height: 50rpx;
                    line-height: 50rpx;
                    color: #3a3a3b;
                    font-size: 28rpx;
                    text-align: center;
                }

                .min-weather {
                    height: 50rpx;
                    line-height: 50rpx;
                    color: #3a3a3b;
                    font-size: 28rpx;
                    text-align: center;
                }

                .weather-line {
                    height: 100px;
                }

                .feng-font {
                    height: 50rpx;
                    line-height: 50rpx;
                    color: #3a3a3b;
                    font-size: 28rpx;
                    text-align: center;
                }

                .feng-type {
                    height: 50rpx;
                    line-height: 50rpx;
                    color: #3a3a3b;
                    font-size: 28rpx;
                    text-align: center;
                }

                .day-state {
                    height: 50rpx;
                    color: #ffffff;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    label {
                        width: 80%;
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 28rpx;
                        text-align: center;
                        background-color: #0fa28e;
                        border-radius: 40rpx;
                    }
                }

                &:last-child {
                    border-right: none;
                }
            }
        }
    }
}
</style>
